<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Login</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>User Login</h2>
<form id="loginForm" action="/login" method="post">
    <div>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username">
    </div>
    <div>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password">
    </div>
    <div>
        <input type="submit" value="Submit">
        <input type="reset" value="Reset">
    </div>
</form>

<script>
    $(document).ready(function() {
        // 监听表单提交事件
        $('#loginForm').submit(function(e) {
            e.preventDefault(); // 阻止表单默认的提交行为

            // 使用ajax异步提交表单数据
            $.ajax({
                url: $(this).attr('action'),
                type: $(this).attr('method'),
                data: $(this).serialize(), // 序列化表单数据
                success: function(response) {
                    // 处理服务器响应
                    console.log("登录成功");
                },
                error: function(xhr, status, error) {
                    // 处理错误
                    console.log("登录失败");
                }
            });
        });
    });
</script>
</body>
</html>
